<template>
  <section>
    <el-button size="mini" type="primary" @click="addQrCodeBtn">新建二维码</el-button>
    <el-table :data="codeList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称" prop="title"/>
      <el-table-column label="类型" prop="qrCodeType.code"/>
      <el-table-column label="路径" prop="api"/>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showQrCodeDialogBtn(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click='delBtn(scope)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="newCodeDialog" :title="currCode.id?'编辑':'新建'" v-if="newCodeDialog">
      <new-code :currCode="currCode" v-on:confirm="confirmCurrCodeBtn"></new-code>
    </el-dialog>
    <el-dialog :visible.sync="showQrCodeDialog" v-if="showQrCodeDialog">
      <show-qr-code :currQrCode="currCode"></show-qr-code>
    </el-dialog>
    <el-row>
      <img :src="imgUrl"/>
    </el-row>
  </section>
</template>

<script>
  // import showQrCode from ''
  import showQrCode from '@/components/courseManagement/qrCodeSign'
  import newCode from './newCode'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "qrCodeList",
    props:[],
    components:{newCode,showQrCode},
    data() {
      return {
        codeList:null,
        totalPage:0,
        newCodeDialog:false,
        currCode:{},
        showQrCodeDialog:false,
        imgUrl:null
      }
    },
    created(){
      this.getQrCodeList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getQrCodeList(val-1)
      },
      getQrCodeList(pageNo){
        this.fetch({name:"getQrCodeList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log(res)
            this.codeList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addQrCodeBtn(){
        this.newCodeDialog=true
      },
      editBtn(row){
        this.currCode=row
        this.newCodeDialog=true
      },
      delBtn(scope){
        console.log(scope.row)
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delQrCode",data:{id:scope.row.id}})
              .then(res=>{
                //还要去更新课程里的
                this.getQrCodeList()
                this.updatePeriod(scope.row.data.periodId)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      confirmCurrCodeBtn(e){
        if(e.id){
          //保存
          console.log('保存',e)
          this.updateQrCode(e)
        }else {
          //新建
          console.log('新建',e)
          this.createQrCode(e)
        }
      },
      createQrCode(data){
        this.fetch({name:"createQrCode",data})
          .then(res=>{
            console.log('生成成功！',res)
            this.newCodeDialog=false
            this.getQrCodeList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateQrCode(data){
        this.fetch({name:"updateQrCode",data})
          .then(res=>{
            console.log('保存成功！',res)
            this.newCodeDialog=false
            this.getQrCodeList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getQrCodeImg(id,encrypt){
        let serverAddress="https://gateway.crzycn.com"
        let api="/core/qrCode/getImage"
        let url=serverAddress+ api + '?'+'id='+id+'&'+'encrypt='+ encrypt +'&' +'token='+ this.$store.getters.token +'&'+'clientid='+this.$store.getters.clientId
        this.imgUrl=url
        // let newUrl=serverAddress+'/qrCodeSign'
        // window.open(newUrl)
        //想打开一个新窗口
      },
      showQrCodeDialogBtn(row){
        this.getQrCodeImg(row.id,false)

      },
      createQrCodeImgBtn(row){
        // this.fetch({name:"createQrCodeImg",data:{id:row.id}})
        //   .then(res=>{
        //     console.log('生成成功！',res)
        //   })
        //   .catch(err=>{
        //     console.log(err)
        //     errHandler.handle(this,err)
        //   })
      },
      updatePeriod(id){
        this.fetch({name:"updatePeriod",data:{id:1,data:null}})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
